<template>
  <div class="rumpage">
    <!--页面-->
    <div class="rumpage-container">
      <el-container style="height: 100%">
        <!--页头-->
        <el-header height="auto" style="padding:0">
          <div class="rumpage-title">
            <div class="rumpage-titleicon" />
            <div class="rumpage-titletex">用户管理</div>
          </div>

          <!--查询条件-->
          <div class="rumpage-query">
            <div class="rumpage-query-title">账号</div>
            <input
              v-model="queryData.account"
              class="rumpage-query-input"
              type="text"
              placeholder="账号"
            >
            <div class="rumpage-query-title">姓名</div>
            <input
              v-model="queryData.username"
              class="rumpage-query-input"
              type="text"
              placeholder="姓名"
            >
            <div class="rumpage-query-title">状态</div>

            <el-select v-model="queryData.enabled" placeholder="请选择" class="rumpage-query-select">
              <el-option key="" label="所有" value="" />
              <el-option key="0" label="禁用" value="0" />
              <el-option key="1" label="启用" value="1" />
            </el-select>
            <div class="rumpage-query-title">类型</div>
            <el-select v-model="queryData.category" placeholder="请选择" class="rumpage-query-select">
              <el-option key="" label="所有" value="" />
              <el-option key="1" label="系统用户" value="1" />
              <el-option key="2" label="证书订户" value="2" />
            </el-select>
            <div class="rumpage-query-querybtn" @click="queryUserEvt">查询</div>
            <div
              class="rumpage-query-addbtn"
              @click="addUserEvt"
            >添加</div>
          </div>
        </el-header>

        <!--表格-->
        <el-main style="padding:0 32px;height:100%">
          <el-table
            height="100%"
            :data="userList"
            class="rumpage-table"
            row-class-name="rumpage-table-row"
            cell-class-name="rumpage-table-cell"
            header-row-class-name="rumpage-table-header"
            header-cell-class-name="rumpage-table-headercell"
          >
            <el-table-column type="index" :index="indexMethod" label="编号" width="100" />
            <el-table-column prop="account" label="账号" />
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="telephone" label="电话" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="enabled" :formatter="enabledFormat" label="状态" />
            <el-table-column prop="category" :formatter="categoryFormat" label="类型" />
            <el-table-column fixed="right" label="操作" width="250px">
              <template slot-scope="scope">
                <el-button type="text" @click="updateUserEvt(scope.row)">编辑</el-button>
                <el-button type="text" @click="delUserEvt(scope.row)">删除</el-button>
                <el-button type="text" @click="restUserEvt(scope.row)">重置密码</el-button>
                <el-button type="text" @click="clockUserEvt(scope.row)">{{ scope.row.enabled?"禁用":"启用" }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>

        <!--页脚-->
        <el-footer class="el-footer" style="height:80px;padding:0 32px">
          <el-pagination
            class="pagination"
            background
            :page-size="pagination.pageSize"
            :current-page="pagination.page"
            :total="pagination.total"
            layout="prev, pager, next,sizes,jumper"
            @current-change="paginationEvt"

            @size-change="pageSizeChang"
          ><!-- -->
          </el-pagination>
        </el-footer>
      </el-container>
    </div>

    <!--添加用户-->
    <el-dialog custom-class="rumpage-formdialog" :visible.sync="addDialogVisible" width="586px">
      <div slot="title" class="rumpage-formdialogtitle">添加用户</div>

      <div class="rumpage-formdialogbody">
        <el-form ref="addUserForm" :model="userObj" label-width="100px">
          <el-form-item prop="account">
            <label slot="label" class="rumpage-formitem">账号</label>

            <el-input v-model="userObj.account" :disabled="evnetType==2" />
            <div v-show="accountErrorTip !=''" class="register-errortip">{{ accountErrorTip }}</div>
          </el-form-item>

          <el-form-item v-if="evnetType==1" prop="password">
            <label slot="label" class="rumpage-formitem">密码</label>
            <el-input v-model="userObj.passwd" type="password" />
            <div v-show="passwordErrorTip !=''" class="register-errortip">{{ passwordErrorTip }}</div>
          </el-form-item>
          <el-form-item prop="role">
            <label slot="label" class="rumpage-formitem">角色</label>
            <el-select v-model="userObj.roleId" placeholder="请选择" class="el-input">
              <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id" />
            </el-select>
            <div v-show="roleErrorTip !=''" class="register-errortip">{{ roleErrorTip }}</div>
          </el-form-item>
          <el-form-item prop="username">
            <label slot="label" class="rumpage-formitem">姓名</label>
            <el-input v-model="userObj.username" />
            <div v-show="userErrorTip !=''" class="register-errortip">{{ userErrorTip }}</div>
          </el-form-item>

          <el-form-item prop="email">
            <label slot="label" class="rumpage-formitem">邮箱</label>
            <el-input v-model="userObj.email" />
            <div v-show="emailErrorTip !=''" class="register-errortip">{{ emailErrorTip }}</div>
          </el-form-item>

          <el-form-item prop="telephone">
            <label slot="label" class="rumpage-formitem">电话</label>
            <el-input v-model="userObj.telephone" />
            <div v-show="phoneErrorTip !=''" class="register-errortip">{{ phoneErrorTip }}</div>
          </el-form-item>
          <el-form-item prop="address">
            <label slot="label" class="rumpage-formitem">地址</label>
            <el-input v-model="userObj.address" />
            <div v-show="addressErrorTip !=''" class="register-errortip">{{ addressErrorTip }}</div>
          </el-form-item>

        </el-form>
      </div>

      <span slot="footer" class="rumpage-formdialogfooter">
        <div
          v-if="evnetType==1"
          class="rumpage-dialogconfirmbtn"
          type="primary"
          @click="addUserForm"
        >添加</div>
        <div
          v-if="evnetType==2"
          class="rumpage-dialogconfirmbtn"
          type="primary"
          @click="updateUserForm"
        >修改</div>
        <div
          class="rumpage-dialogcancalbtn"
          @click="addDialogVisible = false"
        >取消</div>
      </span>
    </el-dialog>

    <!--删除用户-->
    <el-dialog
      title="提示"
      custom-class="rumpage-tipdialog"
      :visible.sync="delDialogVisible"
      width="433px"
      :show-close="false"
    >
      <div slot="title" class="rumpage-tipdialogtitle">{{ message }}</div>
      <span slot="footer" class="rumpage-tipdialogfooter">
        <div
          class="rumpage-dialogconfirmbtn"
          type="primary"
          @click="deleteUserForm"
        >确定</div>
        <div
          class="rumpage-dialogcancalbtn"
          @click="delDialogVisible= false"
        >取消</div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { hex_sha1 } from '@/utils/sha1'
import request from '@/utils/request'
export default {
  name: 'User',
  // components: { Pagination },
  data() {
    return {
      accountErrorTip: '',
      userErrorTip: '',
      passwordErrorTip: '',
      emailErrorTip: '',
      phoneErrorTip: '',
      addressErrorTip: '',
      roleErrorTip: '',
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      isShow: true,
      roles: [],
      orgs: [],
      agents: [],
      queryData: { enabled: '', username: '', account: '', category: '' },
      addDialogVisible: false,
      modifyDialogVisible: false,
      delDialogVisible: false,
      userObj: {},
      delUserObj: {},
      userList: [],
      message: '确定删除该用户?',
      evnetType: null,
      roleList:null
    }
  },
  mounted() {
    this.queryUserEvt()
  },
  methods: {
    indexMethod(index) {
      return (this.pagination.page - 1) * this.pagination.pageSize + index + 1
    },
    queryUserEvt() {
      var that = this
      var t = new Date().getTime()
      var data = {
        offset: (this.pagination.page - 1) * this.pagination.pageSize,
        limit: this.pagination.pageSize
      }

      for (const key in that.queryData) {
        if (that.queryData[key] !== '') {
          data[key] = that.queryData[key]
        }
      }

      request({
        url: `/user/1.1/users?t=${t}`, // ie需加时间戳
        method: 'get',
        params: data
      }).then(response => {
        that.userList = response.data.data
        that.pagination.total = response.data.total
      }).catch(() => {

      })
    },
    queryRoleEvt() {
      var that = this
      var t = new Date().getTime()
      var data = {
        offset: 0,
        limit: 99999999
      }
      request({
        url: `/user/1.1/roles?t=${t}`, // ie需加时间戳
        method: 'get',
        params: data
      }).then(response => {
        that.roleList = response.data.data
      }).catch(() => {

      })
    },
    paginationEvt(page) {
      this.pagination.page = page
      this.queryUserEvt()
    },
    pageSizeChang(pageSize) {
      this.pagination.pageSize = pageSize
      this.paginationEvt(1)
    },
    enabledFormat(row, column) {
      var enabled = row[column.property]
      return enabled ? '启用' : '禁用'
    },
    categoryFormat(row, column) {
      var category = row[column.property]
      if (category === 1) {
        return '系统用户'
      } else if (category === 2) {
        return '证书订户'
      }
    },

    addUserEvt() {
      this.userObj = {
        account: '',
        passwd: '',
        username: '',
        address: '',
        telephone: '',
        email: '',
        roleId: ''
      }
      this.evnetType = 1
      // this.isUpdate=false;
      this.phoneErrorTip = ''
      this.emailErrorTip = ''
      this.roleErrorTip = ''
      this.orgErrorTip = ''
      this.addDialogVisible = true
      this.queryRoleEvt()
    },
    updateUserEvt(row) {
      this.userObj = {
        account: row.account,
        username: row.username,
        address: row.address,
        telephone: row.telephone,
        email: row.email,
        id: row.id,
        roleId: row.roleId
      }
      this.evnetType = 2
      // this.isUpdate=true;
      this.phoneErrorTip = ''
      this.emailErrorTip = ''
      this.roleErrorTip = ''
      this.orgErrorTip = ''
      this.addDialogVisible = true

      this.queryRoleEvt()
    },
    delUserEvt(row) {
      this.evnetType = 3
      this.message = '确定删除该用户？'
      this.delDialogVisible = true
      this.userObj = {
        id: row.id
      }
    },
    restUserEvt(row) {
      this.evnetType = 4
      this.message = '确定重置密码？'
      this.delDialogVisible = true
      this.userObj = {
        id: row.id
      }
    },
    clockUserEvt(row) {
      this.evnetType = 5
      this.delDialogVisible = true
      if (row.enabled) {
        this.message = '确定禁用该用户？'
      } else {
        this.message = '确定启用该用户？'
      }
      this.userObj = {
        id: row.id,
        enabled: row.enabled
      }
    },
    userVerification() {
      if (this.userObj.username === '') {
        this.userErrorTip = '用户名不能为空'
        return false
      }
      this.userErrorTip = ''
      return true
    },
    roleVerification() {
      if (this.userObj.roleId === '') {
        this.roleErrorTip = '角色不能为空'
        return false
      }
      this.roleErrorTip = ''
      return true
    },
    accountVerification() {
      if (this.userObj.account === '') {
        this.accountErrorTip = '账号不能为空'
        return false
      }
      this.accountErrorTip = ''
      return true
    },
    passwordVerification() {
      if (
        this.userObj.passwd === '' ||
        this.userObj.passwd.length < 1 || this.userObj.passwd.length > 16
      ) {
        this.passwordErrorTip = '密码长度1-16位'
        return false
      }

      var regex = new RegExp(
        '^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-ZW_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-zW_!@#$%^&*`~()-+=]+$)(?![0-9W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9W_!@#$%^&*`~()-+=]{1,16}$'
      )
      if (!regex.test(this.userObj.passwd)) {
        this.passwordErrorTip = '密码须包含字母大、小写、数字、特殊字符中的三种'
        return false
      } else {
        this.passwordErrorTip = ''
        return true
      }
    },
    emailVerification() {
      if (this.userObj.email === '') {
        this.emailErrorTip = '邮箱不能为空'
        return false
      }

      var regex = new RegExp('^[\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$')
      if (!regex.test(this.userObj.email)) {
        this.emailErrorTip = '邮箱格式不正确'
        return false
      } else {
        this.emailErrorTip = ''
        return true
      }
    },
    addressVerification() {
      if (this.userObj.address === '') {
        this.addressErrorTip = '地址不能为空'
        return false
      } else {
        this.addressErrorTip = ''
        return true
      }
    },
    phoneVerification() {
      if (this.userObj.telephone === '') {
        this.phoneErrorTip = '电话不能为空'
        return false
      } else {
        this.phoneErrorTip = ''
        return true
      }
    },
    addUserForm() {
      var that = this

      if (
        !this.accountVerification() ||
      !this.passwordVerification() ||
      !this.roleVerification()||
          !this.userVerification() ||
      !this.emailVerification() ||
      !this.phoneVerification() ||
      !this.addressVerification()
      ) {
        return
      }
      var registerData = {
        account: this.userObj.account,
        passwd: hex_sha1(this.userObj.passwd),
        email: this.userObj.email,
        username: this.userObj.username,
        telephone: this.userObj.telephone,
        address: this.userObj.address,
        roleId:this.userObj.roleId
      }

      request({
        url: `/user/1.1/users`, // ie需加时间戳
        method: 'post',
        data: registerData
      }).then(response => {
        that.userObj.id = response.data.id
      }).catch(error => {
        console.log(error.data)
        error.data.errors.forEach((item) => {
          if (item.desc === 'account already exists') {
            that.userErrorTip = '账号已存在'
          }
        })
      })
      this.addDialogVisible = false
      this.queryUserEvt()
    },
    updateUserForm() {
      var that = this
      var registerData = {}
      if (this.evnetType === 2) {
        if (
          !this.emailVerification() ||
          !this.roleVerification()||
      !this.userVerification() ||
      !this.phoneVerification() ||
      !this.addressVerification()
        ) {
          return
        }
        registerData = {
          email: this.userObj.email,
          username: this.userObj.username,
          telephone: this.userObj.telephone,
          address: this.userObj.address,
          roleId:this.userObj.roleId
        }
      } else if (this.evnetType === 4) {
        registerData = {
          passwd: '0811331261a619b10bd9b8e40e9a3110e9c8c45b'
        }
      } else if (this.evnetType === 5) {
        registerData = {
          enabled: !this.userObj.enabled
        }
      }

      var id = this.userObj.id
      request({
        url: `/user/1.1/users/${id}`, // ie需加时间戳
        method: 'patch',
        data: registerData
      }).then(response => {
        that.userObj.id = response.data.id
        this.queryUserEvt()
      }).catch(error => {
        console.log(error.data)
      })
      this.addDialogVisible = false
    },
    deleteUserForm() {
      if (this.evnetType !== 3) {
        this.updateUserForm()
      } else {
        var id = this.userObj.id
        request({
          url: `/user/1.1/users/${id}`, // ie需加时间戳
          method: 'DELETE'
        }).then(response => {
          this.userObj.id = response.data.id
          console.log('------------')
          this.queryUserEvt()
        }).catch(error => {
          console.log(error.data)
        })
      }
      this.delDialogVisible = false
    }
  }
}
</script>

<!--header-->
<style>
.rumpage {
  padding: 0 24px 24px 24px;
  background: #f0f2f5;
  height: 100%;
}

.rumpage-container {
  width: 100%;
  height: 100%;
  padding: 32px 0;
  background: #ffffff;
}

.rumpage-title {
  display: flex;
  padding-bottom: 40px;
}

.rumpage-titleicon {
  height: 18px;
  width: 4px;
  background: #0057ff;
  align-self: center;
}

.rumpage-titletex {
  font-family: font-PingFangSCMedium;
  font-size: 16px;
  color: #343a40;
  letter-spacing: 0;
  line-height: 24px;
  font-weight: bold;
  align-self: center;
  margin-left: 28px;
}
</style>

<!--查询-->
<style lang='scss'>
.rumpage-query {
  padding: 0 32px 24px 32px;
  font-size: 0;
}

.rumpage-query-title {
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  color: #343a40;
  letter-spacing: 0;
  text-align: right;
  line-height: 32px;
  display: inline-block;
}

.rumpage-query-title:not(:first-child) {
  margin-left: 24px;
}

.rumpage-query-select{
  display: inline-block;
  width: 154px;
  height: 32px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  line-height: 32px;
  font-family: font-PingFangSCRegular;
  font-size: 14px;

  margin-left: 16px;
}

.rumpage-query-input {
  display: inline-block;
  width: 174px;
  height: 32px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  line-height: 32px;
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  // color: #c2c7d0;
  letter-spacing: 0;
  padding: 6px 8px 6px 16px;
  margin-left: 16px;
}

.rumpage-query-input:focus {
  outline: none;
  border: 1px solid #409eff;
}

.rumpage-query-querybtn {
  background: #0057ff;
  border-radius: 4px;
  width: 60px;
  height: 32px;
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  cursor: pointer;
  margin-left: 24px;
}

.rumpage-query-addbtn {
  float: right;
  background: #0057ff;
  border-radius: 4px;
  width: 60px;
  height: 32px;
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
</style>

<!--table、page-->
<style>
.rumpage-table {
  height: 100%;
}

.rumpage-table::before {
  background: #ffffff !important;
}

.rumpage-table .el-table__fixed-right::before {
  background: #ffffff !important;
}

.rumpage-table-header {
  font-family: font-PingFangSCSemibold;
  font-size: 14px;
  color: #343a40;
  letter-spacing: 0;
  text-align: center;
  height: 50px;
}

.rumpage-table-headercell {
  font-family: font-PingFangSCSemibold;
  font-size: 14px;
  color: #343a40;
  letter-spacing: 0;
  text-align: center !important;
  background-color: rgba(234, 234, 234, 0.15) !important;
}

.rumpage-table-row {
  height: 50px;
}

.rumpage-table-cell {
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  color: #343a40;
  letter-spacing: 0;
  text-align: center !important;
}

.rumpage-page {
  margin-top: 45px;
  margin-right: 32px;
  text-align: right;
}
</style>

<!--form dialog-->
<style>
.rumpage-formdialog {
  background: #ffffff;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.rumpage-formdialog > .el-dialog__header {
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.rumpage-formdialog > .el-dialog__body {
  padding: 0;
}

.rumpage-formdialog > .el-dialog__footer {
  padding: 24px 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.rumpage-formdialogtitle {
  height: 56px;
  font-family: font-PingFangSCMedium;
  font-size: 16px;
  color: #343a40;
  line-height: 56px;
  font-weight: bold;
  padding-left: 40px;
}

.rumpage-formdialogbody {
  padding: 40px 40px 0px 40px;
}

.rumpage-formitem {
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  color: #343a40;
  text-align: right;
  padding: 0 4px 0 4px;
  line-height: 40px;
}

.rumpage-formdialogfooter {
  height: 32px;
  display: block;
}
</style>

<style lang="scss" scoped>
.rumpage-formdialogbody {
  ::v-deep .el-radio-group {
    .is-checked {
      .is-checked {
        .el-radio__inner {
          background: #0057ff;
          border-color: #0057ff;
        }
      }
      .el-radio__label {
        color: #0057ff;
      }
    }
    .el-radio__label {
      font-family: font-PingFangSCRegular;
      font-size: 14px;
      color: #343a40;
      line-height: 20px;
    }
  }
}
</style>

<!--tip dialog-->
<style>
.rumpage-tipdialog {
  background: #ffffff;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 32px;
  top: calc(50% - 300px);
}

.rumpage-tipdialog > .el-dialog__header {
  padding: 0;
}

.rumpage-tipdialog > .el-dialog__body {
  padding: 0;
}

.rumpage-tipdialog > .el-dialog__footer {
  padding: 0;
}

.rumpage-tipdialogtitle {
  height: 24px;
  font-family: font-PingFangSCMedium;
  font-size: 16px;
  color: #343a40;
  line-height: 24px;
  font-weight: bold;
}

.rumpage-tipdialogbody {
  padding: 40px 0;
}

.rumpage-tipdialogfooter {
  height: 32px;
  display: block;
  padding-top: 12px;
}
</style>

<!--dialog btn-->
<style>
.rumpage-dialogcancalbtn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  float: right;
  margin-right: 8px;
}

.rumpage-dialogconfirmbtn {
  width: 65px;
  height: 32px;
  background: #0057ff;
  border-radius: 4px;
  font-family: font-PingFangSCRegular;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  float: right;
}

.rumpage-dialogconfirmbtn:hover {
  background: #f2f6ff;
  border: 1px solid #3e80fc;
  color: #3e80fc;
}

.rumpage-dialogconcalbtn:hover {
  background: #f2f6ff;
  border: 1px solid #3e80fc;
  color: #3e80fc;
}

.pagination{
  float: right;
}

.register-errortip {
    position: absolute;
    z-index: 100;
    top: 40px;
    width: 320px;
    font-family: font-PingFangSCRegular;
    font-size: 12px;
    color: #f5222d;
    letter-spacing: 0;
    text-align: left;
    line-height: 24px;
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /*规定段落中的文本不进行换行 */
  }

</style>

